<!-- 
1. background	是否为分页按钮添加背景色 接受boolean类型
2. current-page	 当前页数，支持 .sync 修饰符  接受类型 number
3. page-size	每页显示条目个数，支持 .sync 修饰符    number
4. page-sizes	每页显示个数选择器的选项设置	number[]	—	[10, 20, 30, 40, 50, 100]
5. total	总条目数	number
6. size-change	pageSize 改变时会触发
7. current-change	currentPage 改变时会触发


-->
<template>
  <div>
    <el-pagination :background="background" :current-page.sync="currentPage" :page-size.sync="pageSize" :layout="layout"
      :page-sizes="pageSizes" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" :hide-on-single-page="true" />
  </div>
</template>
<script>
export default {
  name: 'Pagination',
  props: {
    total: {
      required: true,
      type: Number
    },
    page: {
      type: Number,
      default: 1
    },
    limit: {
      type: Number,
      default: 20
    },
    pageSizes: {
      type: Array,
      default() {
        return [2, 5, 10, 15]
      }
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
    background: {
      type: Boolean,
      default: true
    },
  },
  computed: {
    // get() 方法返回当前计算属性的值， set(val) 方法在计算属性的值发生改变时被调用，用于触发 update: page 事件，将新的值 val 传递给父组件。在父组件中，可以通过监听 update: page 事件来获取新的值，并进行相应的处理。
    // update: page 事件名中的 update 是Vue.js中的一种特殊语法，用于实现双向数据绑定。
    currentPage: {
      get() {
        return this.page
      },
      set(val) {
        this.$emit('update:page', val)
      }
    },
    pageSize: {
      get() {
        return this.limit
      },
      set(val) {
        this.$emit('update:limit', val)
      }
    }
  },
  methods: {
    handleSizeChange(val) {
      //this.$emit('pagination', { page: this.currentPage, limit: val })
      this.$emit('pagination')
    },
    handleCurrentChange(val) {
      //this.$emit('pagination', { page: val, limit: this.pageSize })
      this.$emit('pagination')
    }
  }
}
</script>